{% extends "base.html" %}

{% block title %}Order #{{ order.id }} - ShopEasy{% endblock %}

{% block content %}
<div class="bg-white shadow overflow-hidden sm:rounded-lg">
    <div class="px-4 py-5 sm:px-6">
        <h2 class="text-lg leading-6 font-medium text-gray-900">Order #{{ order.id }}</h2>
        <p class="mt-1 max-w-2xl text-sm text-gray-500">
            Order placed on {{ order.created_at.strftime('%B %d, %Y at %H:%M') }}
        </p>
        <div class="mt-4 inline-flex items-center px-2.5 py-0.5 rounded-full text-sm font-medium bg-green-100 text-green-800">
            Status: {{ order.status|capitalize }}
        </div>
    </div>
    
    <div class="border-t border-gray-200">
        <h3 class="px-4 py-4 bg-gray-50 text-sm font-medium text-gray-500 sm:px-6">
            Order Details
        </h3>
        <ul class="divide-y divide-gray-200">
            {% for item in order.items %}
            <li class="px-4 py-4 sm:px-6">
                <div class="flex items-center">
                    <div class="h-10 w-10 flex-shrink-0">
                        <img class="h-10 w-10 object-cover" src="{{ item.product.image_url }}" alt="{{ item.product.name }}">
                    </div>
                    <div class="ml-4 flex-1 flex justify-between">
                        <div>
                            <p class="text-sm font-medium text-gray-900">{{ item.product.name }}</p>
                            <p class="mt-1 text-sm text-gray-500">Qty: {{ item.quantity }}</p>
                        </div>
                        <p class="text-sm font-medium text-gray-900">${{ "%.2f"|format(item.price) }} x {{ item.quantity }}</p>
                    </div>
                </div>
            </li>
            {% endfor %}
        </ul>
    </div>
    
    <div class="border-t border-gray-200 bg-gray-50 px-4 py-6 sm:px-6">
        <div class="flex justify-between text-base font-medium text-gray-900 sm:border-t sm:pt-6">
            <p>Total</p>
            <p>${{ "%.2f"|format(order.total_amount) }}</p>
        </div>
        <div class="mt-6">
            <a href="/orders" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                Back to Orders
            </a>
        </div>
    </div>
</div>
{% endblock %}
